<!DOCTYPE html>

<html>
	<head>
		<title>Extrude</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<script type="text/javascript" src="../libs/OrbitControls.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">

			var orbit;

			//once everything is loaded, we run our Three.js stuff.
			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();
 				
 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				
 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-40, 60, -10);
 				scene.add(spotLight);

 				//add plane
 				// var planeGeo = new THREE.PlaneGeometry(60,40,1,1);
 				// var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				// var plane = new THREE.Mesh(planeGeo, planeMtr);
 				// plane.rotation.x = -0.5 * Math.PI;
		   //      plane.position.x = 0;
		   //      plane.position.y = 0;
		   //      plane.position.z = 0;
		   //      plane.receiveShadow = true;
		   //      scene.add(plane);


		        camera.position.x = 20;
		        camera.position.y = 60;
		        camera.position.z = 50;
		        camera.lookAt(20, 20, 0);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        orbit = new THREE.OrbitControls(camera, renderer.domElement);

		        var mesh;
		        var geom = new THREE.ShapeGeometry(drawShape());
		        var mtr = new THREE.MeshNormalMaterial({
		            		transparent: true,
		            		opacity: 0.6
		            	});
		        var mesh = new THREE.Mesh(geom, mtr);
		        scene.add(mesh);

		        var controls = new function() {
		        	this.amount = 2;
		            this.bevelThickness = 2;
		            this.bevelSize = 0.5;
		            this.bevelSegments = 3;
		            this.bevelEnabled = true;
		            this.curveSegments = 12;
		            this.steps = 1;

		            this.change = function (){
		            	scene.remove(mesh);

		            	var options = {
		            		amount: controls.amount,
		            		bevelThickness: controls.bevelThickness,
		            		bevelSize: controls.bevelSize,
		            		bevelSegments: controls.bevelSegments,
		            		bevelEnabled: controls.bevelEnabled,
		            		curveSegments: controls.curveSegments,
		            		steps: controls.steps
		            	}

		            	geom = new THREE.ExtrudeGeometry(drawShape(), options);
		            	mesh = new THREE.Mesh(geom, mtr);
		            	scene.add(mesh);

		            }
		        }

		        var gui = new dat.GUI();
		        gui.add(controls, 'amount', 0, 20).onChange(controls.change);
		        gui.add(controls, 'bevelThickness', 0, 10).onChange(controls.change);
		        gui.add(controls, 'bevelSize', 0, 10).onChange(controls.change);
		        gui.add(controls, 'bevelSegments', 0, 30).step(1).onChange(controls.change);
		        gui.add(controls, 'bevelEnabled').onChange(controls.change);
		        gui.add(controls, 'curveSegments', 1, 30).step(1).onChange(controls.change);
		        gui.add(controls, 'steps', 1, 5).step(1).onChange(controls.change);

		        controls.change();

 				//add animation
 				render();
 				function render(){
 					stats.update();
 					orbit.update();

 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

 				function drawShape() {

		            // create a basic shape
		            var shape = new THREE.Shape();

		            // startpoint
		            shape.moveTo(10, 10);

		            // straight line upwards
		            shape.lineTo(10, 40);

		            // the top of the figure, curve to the right
		            shape.bezierCurveTo(15, 25, 25, 25, 30, 40);

		            // spline back down
		            shape.splineThru(
		                    [new THREE.Vector2(32, 30),
		                        new THREE.Vector2(28, 20),
		                        new THREE.Vector2(30, 10),
		                    ]);

		            // curve at the bottom
		            shape.quadraticCurveTo(20, 15, 10, 10);

		            // add 'eye' hole one
		            var hole1 = new THREE.Path();
		            hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true);
		            shape.holes.push(hole1);

		            // add 'eye hole 2'
		            var hole2 = new THREE.Path();
		            hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true);
		            shape.holes.push(hole2);

		            // add 'mouth'
		            var hole3 = new THREE.Path();
		            hole3.absarc(20, 16, 2, 0, Math.PI, true);
		            shape.holes.push(hole3);

		            // return the shape
		            return shape;
		        }

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

		</script>

	</body>
</html>